<!-- eslint-disable prettier/prettier -->
<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card class="general-card" :header-style="{ paddingBottom: '14px' }">
      <template #title>各版本未通过测评项目数量统计</template>
      <template #extra>
        <a-link>{{ $t("workplace.viewMore") }}</a-link>
      </template>
      <a-row class="grid-demo" justify="space-around">
      <a-col :span="8">
        <div>
          <Chart style="width: 100%; height: 347px" :option="chartOption" />
        </div>
      </a-col>
      <a-col :span="8">
        <div> <Chart style="width: 100%; height: 347px" :option="chartOption" /></div>
      </a-col>
      <a-col :span="8">
        <div> <Chart style="width: 100%; height: 347px" :option="chartOption" /></div>
      </a-col>
    </a-row>

    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { ToolTipFormatterParams } from "@/types/echarts"
import useLoading from "@/hooks/loading"
import { queryContentPublish, ContentPublishRecord } from "@/api/visualization"
import useChartOption from "@/hooks/chart-option"

const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
  return items
    .map(
      (el) => `<div class="content-panel">
    <p>
      <span style="background-color: ${el.color}" class="tooltip-item-icon"></span>
      <span>
      ${el.seriesName}
      </span>
    </p>
    <span class="tooltip-value">
      ${Number(el.value).toLocaleString()}
    </span>
  </div>`
    )
    .join("")
}

const { loading, setLoading } = useLoading(true)
const xAxis = ref<string[]>([])
const textChartsData = ref<number[]>([])
const imgChartsData = ref<number[]>([])
const videoChartsData = ref<number[]>([])

// There should not be negative values in rawData
const rawData = [
  [100, 302, 301, 334, 390, 330, 320],
  [320, 132, 101, 134, 90, 230, 210],
  [220, 182, 191, 234, 290, 330, 310],
  [150, 212, 201, 154, 190, 330, 410],
  [820, 832, 901, 934, 1290, 1330, 1320]
]
const totalData: number[] = []
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i]
  }
  totalData.push(sum)
}
const grid = {
  left: 100,
  right: 100,
  top: 50,
  bottom: 50
}
const series = ["8.0.1", "7.0.2", "9.0.3", "6.3.5"].map((name, sid) => {
  return {
    name,
    type: "bar",
    stack: "total",
    barWidth: "60%",
    label: {
      show: true,
      formatter: (params: { value: number }) => Math.round(params.value * 1000) / 10 + "%"
    },
    data: rawData[sid].map((d, did) => (totalData[did] <= 0 ? 0 : d / totalData[did]))
  }
})
// legend: {
//     selectedMode: false
//   },
//   grid,
//   yAxis: {
//     type: "value"
//   },
//   xAxis: ,
//   series

const { chartOption } = useChartOption(() => {
  return {
    grid,
    legend: {
      bottom: 0,
      icon: "circle",
      textStyle: {
        color: "#4E5969"
      }
    },
    xAxis: {
      type: "category",
      data: ["8.0.1", "9.0.3"]
    },
    yAxis: {
      type: "value"
      // axisLabel: {
      //   color: "#86909C",
      //   formatter(value: number, idx: number) {
      //     if (idx === 0) return `${value}`
      //     return `${value / 1000}k`
      //   }
      // },
      // splitLine: {
      //   lineStyle: {
      //     color: isDark ? "#3F3F3F" : "#E5E6EB"
      //   }
      // }
    },
    tooltip: {
      show: true,
      trigger: "axis",
      formatter(params) {
        const [firstElement] = params as ToolTipFormatterParams[]
        return `<div>
            <p class="tooltip-title">${firstElement.axisValueLabel}</p>
            ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
          </div>`
      },
      className: "echarts-tooltip-diy"
    },
    series
  }
})
const fetchData = async () => {
  setLoading(true)
  try {
    const { data: chartData } = await queryContentPublish()
    xAxis.value = chartData[0].x
    chartData.forEach((el: ContentPublishRecord) => {
      if (el.name === "纯文本") {
        textChartsData.value = el.y
      } else if (el.name === "图文类") {
        imgChartsData.value = el.y
      }
      videoChartsData.value = el.y
    })
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false)
  }
}
fetchData()
</script>

<style scoped lang="less"></style>
